{% from 'bootstrap/nav.html' import render_nav_item %}

{# 个人中心的最上面的用户卡片 #}
<div class="row">
    <div class="col-md-3">
        {# 展示大的图片头像#}
        <img class="img-fluid rounded" src="{{ url_for('main.get_avatar', filename=user.avatar_l) }}">
    </div>
    {# 展示用户信息 #}
    <div class="col-md-9">
        <h1>{{ user.name }}
            <small class="text-muted">{{ user.username }}</small>
        </h1>
        {% if user.bio %}<p>{{ user.bio }}</p>{% endif %}
        <p>
            {% if user.website %}
                <span class="oi oi-link-intact"></span>
                <a href="{{ user.website }}" target="_blank">{{ user.website|truncate(30) }}</a>&nbsp;&nbsp;
            {% endif %}
            {% if user.location %}
                <span class="oi oi-map-marker"></span>
                <a href="https://www.google.com/maps?q={{ user.location }}"
                   target="_blank">{{ user.location|truncate(30) }}</a>&nbsp;&nbsp;
            {% endif %}
            <span class="oi oi-calendar"></span>
            {{ moment(user.register_time).format('LL') }} 加入
        </p>
    </div>
</div>

<div class="user-nav">
    <ul class="nav nav-tabs">
        {# 渲染个人页面的Post导航#}
        {{ render_nav_item('user.index', '文章', user.posts|length, username=user.username) }}
        {# 渲染收集的图片 #}
        {{ render_nav_item('user.show_collections', '收藏的文章', user.collections|length, username=user.username) }}
        {# 渲染展示关注我的人 #}
        {{ render_nav_item('user.show_following', '关注的人', user.following.count() - 1, username=user.username) }}
        {# 我关注的 #}
        {{ render_nav_item('user.show_followers', '我的粉丝', user.followers.count() - 1, username=user.username) }}
    </ul>
</div>

